<template>
    <div class="content">
        <div class="content-box">
            <div class="content-cell" v-for="(item, index) in testData" :key="index" @click="jumpDetails(item)">
                <span>{{ item.name }}</span>
            </div>
        </div>
    </div>
</template>

<script>
import { ref,watch } from 'vue';
import { useRouter } from 'vue-router';

export default {
    props: ['infoData'], // 声明接收父组件传递的 infoData 属性
    setup(props) {
        const router = useRouter();
        const testData = ref(props.infoData); // 将父组件传递的数据绑定到 testData

        function jumpDetails(info) {
            console.log(info);
            router.push({
                path: '/doctorInformation',
                query: {
                    info: info
                }
            })
        }

        // 监听 infoData 的变化，确保数据更新时也能刷新视图
        watch(() => props.infoData, (newVal) => {
            testData.value = newVal;
        });

        return {
            testData, // 使用 testData 替换原本的空对象
            jumpDetails,
        }
    }
}
</script>

<style lang="less" scoped>
.content {
    width: 100%;
    height: 90%;
    background-image: url("@/assets/images/aboutDoctorPage/image.png.png");
    background-size: cover;
    overflow: hidden;
    display: flex;
    align-items: center;
    flex-direction: column;

    .content-box {
        margin-top: 28.5px;

        .content-cell {
            width: 250px;
            height: 27px;
            margin-top: 9px;
            opacity: 1;
            border-radius: 5px;
            background: #FFFFFFBF;
            border: 2px solid #BD8848FF;
            box-shadow: inset 0px 2px 4px #0000003F, 0px 2px 4px #0000003F;
            display: flex; // 水平和垂直居中
            align-items: center; // 垂直居中
            justify-content: center; // 水平居中


            span {
                /** 文本1 */
                font-size: 14px;
                font-weight: 500;
                line-height: 20.24px;
                text-align: center;

            }
        }
    }
}
</style>